<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .bgc {
            background-color: rgba(0, 0, 0, 0.5);
            height: 100%;
            width: 100%;

        }

        .main {
            position: absolute;
            background-color: white;
            left: 30%;
            width: 30%;
            height: 50%;
            margin: 5% auto;
            border-radius: 10px;
            transform: scale(0);
        }

        #dol {
            position: fixed;
            top: 100%;
            transform: translateY(0);
            height: 100%;
            width: 100%;
            left: 0;
        }

        .cs{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            transform: scale(1);
            transition: 3s all;
        }
        .cs:hover{
           
            transform: scale(5);
        }
    </style>
</head>

<body>
    <header>
        <h1>aaaa</h1>
    </header>
    <button type="button" onclick="dk(this)" data-type="dk">打开</button>
    <div class="cs">

    </div>
    <div id="dol" class="dol">
        <div class="bgc" onclick="dk(this)" data-type="gb">
            <div class="main" id="main">
                这是一个弹出层
            </div>
        </div>
    </div>
    <script>
        var dd = document.getElementById("dol");
        var ss = document.getElementById("main");
        var a = 100;
        var b = 0;
function dk(elm){
    // alert (elm.getAttribute("data-type"));
   switch(elm.getAttribute("data-type")){
       case "dk":dd.style.transition  = "2s all"; dd.style.transform = "translateY(-100%)"; dd.style.opacity = "1";
       var time = setInterval(function(){
           b++;
           if(b==2){
               b=0;
               ss.style .transform= "scale(1)";
               ss.style.transition = "2s all";
               clearInterval(time);
               
           }
       },1000); break;
       case "gb":ss.style .transform= "scale(0)";
               ss.style.transition = "2s all";;
       var time1 = setInterval(function(){
           b++;
           if(b==2){
               b=0;
               dd.style.transition = "2s all";dd.style.transform = "translateY(0)";dd.style.opacity = "0"
               clearInterval(time1);
               
           }
       },1000);break;
   }
}
    </script>
</body>

</html>